import React from 'react'
import {
  Drawer, List, Avatar, Divider, Col, Row
} from 'antd'
import './index.scss'

const pStyle = {
  fontSize: 16,
  color: 'rgba(0,0,0,0.85)',
  lineHeight: '24px',
  display: 'block',
  marginBottom: 16
}

const DescriptionItem = ({ title, content }) => (
  <div
    style={{
      fontSize: 14,
      lineHeight: '22px',
      marginBottom: 7,
      color: 'rgba(0,0,0,0.65)'
    }}
  >
    <p
      style={{
        marginRight: 8,
        display: 'inline-block',
        color: 'rgba(0,0,0,0.85)'
      }}
    >
      {title}:
    </p>
    {content}
  </div>
)

class UserDeails extends React.Component {
  constructor (props) {
    super(props)
    this.state = { visible: false }
    this.showDrawer = this.showDrawer.bind(this)
    this.onClose = this.onClose.bind(this)
  }
  showDrawer () {
    this.setState({
      visible: true
    })
  };

  onClose () {
    this.setState({
      visible: false
    })
  };

  render () {
    return (
      <div className='tabels'>
        <List
          dataSource={[
            {
              name: '老王'
            },
            {
              name: '老刘'
            }
          ]}
          bordered
          renderItem={item => (
            <List.Item key={item.id} actions={[<a onClick={this.showDrawer}>View Profile</a>]}>
              <List.Item.Meta
                avatar={
                  <Avatar src='https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png' />
                }
                title={<a href='https://ant.design/index-cn'>{item.name}</a>}
                description='Progresser AFX'
              />
            </List.Item>
          )}
        />
        <Drawer
          width={640}
          placement='right'
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
          <p style={pStyle}>Personal</p>
          <Row>
            <Col span={12}>
              <DescriptionItem title='Full Name' content='Lily' />{' '}
            </Col>
            <Col span={12}>
              <DescriptionItem title='Account' content='AntDesign@example.com' />
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <DescriptionItem title='City' content='HangZhou' />
            </Col>
            <Col span={12}>
              <DescriptionItem title='Country' content='China🇨🇳' />
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <DescriptionItem title='Birthday' content='February 2,1900' />
            </Col>
            <Col span={12}>
              <DescriptionItem title='Website' content='-' />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <DescriptionItem
                title='Message'
                content='Make things as simple as possible but no simpler.'
              />
            </Col>
          </Row>
          <Divider />
          <p style={pStyle}>Company</p>
          <Row>
            <Col span={12}>
              <DescriptionItem title='Position' content='Programmer' />
            </Col>
            <Col span={12}>
              <DescriptionItem title='Responsibilities' content='Coding' />
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <DescriptionItem title='Department' content='AFX' />
            </Col>
            <Col span={12}>
              <DescriptionItem title='Supervisor' content={<a>Lin</a>} />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <DescriptionItem
                title='Skills'
                content='C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc.'
              />
            </Col>
          </Row>
          <Divider />
          <p style={pStyle}>Contacts</p>
          <Row>
            <Col span={12}>
              <DescriptionItem title='Email' content='AntDesign@example.com' />
            </Col>
            <Col span={12}>
              <DescriptionItem title='Phone Number' content='+86 181 0000 0000' />
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <DescriptionItem
                title='Github'
                content={(
                  <a href='http://github.com/ant-design/ant-design/'>
                    github.com/ant-design/ant-design/
                  </a>
                )}
              />
            </Col>
          </Row>
        </Drawer>
      </div>
    )
  }
}
export default UserDeails
